<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/util.js"></script>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/logo.jpg" alt="">
    <span class="title">我的博客系统</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer" style="width: 65%"></span>
    <a href="blog_list.html">主页</a>
    <a href="blog_add.html">写博客</a>
    <a href="myinfo.html">修改个人信息</a>
    <a href="#" onclick="onExit()">退出登录</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
        <div class="card">
            <img id="photo" src="img/avatar.webp" class="avtar" alt="">
            <h3></h3>
            <a href="https://gitee.com/">gitee 地址</a>
            <div class="counter">
                发表总文章数：<span id="cnt"></span>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div class="container-right">
        <!-- 每一篇博客包含标题, 摘要, 时间 -->
    </div>
</div>

<script>
    function onExit() {
        if (confirm("确认退出? ")) {
            jQuery.ajax({
                url: "/user/logout",
                type: "POST",
                data: {},
                // 200
                success: function (body) {
                    // alert(JSON.stringify(body)); // 将 json 转换成 String
                    location.href = "/login.html";
                },
                // 非 200
                error: function (err) {
                    // alert(JSON.stringify(err));
                    if (err != null && err.status == 401) {
                        alert("用户未登录, 即将跳转到登录页!")
                        // 已经被拦截器拦截了 - 未登录
                        location.href = "/login.html";
                    }
                }
            });
        }
    }

    // 获取右侧文章列表
    function initMyList() {
        jQuery.ajax({
            url: '/art/mylist',
            type: 'GET',
            data: {},
            success: function (body) {
                // 获取右侧的容器
                var rightContainer = document.querySelector('.container-right');
                if (body.code == 200 && body.data != null && body.data.length > 0) {
                    // 遍历body的博客列表
                    for (let blog of body.data) {
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        // 创建博客标题
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.appendChild(titleDiv);
                        // 创建发布日期
                        let dateDiv = document.createElement('div');
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = formatDate(blog.createtime);
                        blogDiv.appendChild(dateDiv);
                        // 创建博客简介
                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        // descDiv.id='descMark';
                        // 博客简介即截取文章内容前100个字符
                        var content = subContent(blog.content);
                        descDiv.innerHTML = content;
                        blogDiv.appendChild(descDiv);
                        // 创建一个div
                        let div = document.createElement('div');
                        div.className = 'ownDetail';
                        // 创建查看详情按钮
                        let a1 = document.createElement('a');
                        a1.innerHTML = '<b>查看详情>></b>';
                        a1.style = 'border:2px solid black;background-color:#eaea9a';
                        a1.href = 'blog_content.html?aid=' + blog.aid;
                        div.appendChild(a1);
                        // 创建修改按钮
                        let a2 = document.createElement('a');
                        a2.innerHTML = '<b>修改>></b>';
                        a2.style = 'border:2px solid black;background-color:#d9ecf2';
                        a2.href = 'blog_edit.html?aid=' + blog.aid;
                        div.appendChild(a2);
                        // 创建删除按钮
                        let a3 = document.createElement('a');
                        a3.innerHTML = '<b>删除>></b>';
                        a3.style = 'border:2px solid black;background-color:#ed9898';
                        a3.href = 'javascript:del(' + blog.aid + ')';
                        div.appendChild(a3);
                        // 把这三个按钮添加到外层元素
                        blogDiv.appendChild(div);
                        // 将博客盒子加入右侧容器中
                        rightContainer.appendChild(blogDiv);
                    }
                } else {
                    // 未发表任何数据
                    let blogDiv = document.createElement('div');
                    blogDiv.innerHTML = "<h1>暂无数据</h1>";
                    blogDiv.style = "text-align: center";
                    rightContainer.appendChild(blogDiv);
                }
            },
            error: function (err) {
                if (err != null && err.status == 401) {
                    // alert("用户未登录, 即将跳转到登录页!")
                    // 已经被拦截器拦截了 - 未登录
                    location.href = "/login.html";
                }
            }
        })
    };

    initMyList();

    // 获取个人信息
    function getMyInfo() {
        jQuery.ajax({
            url:'/user/myinfo',
            type:'GET',
            data:{},
            success:function (body) {
                let h3=document.querySelector('.card h3');
                h3.innerHTML=body.data.username;
                if (body.data.photo!=null&&body.data.photo!=""){
                    let photo=document.querySelector("#photo");
                    photo.src=body.data.photo;
                }
            },
            error:function (err) {
                location.href='/login.html'
            }
        })
    }

    getMyInfo();

    // 获取文章数量
    function getMyArtCount() {
        jQuery.ajax({
            url:'/art/myartcount',
            type:'GET',
            data:{},
            success:function (body) {
                if (body.code=200&&body.data!=null){
                    let artSpan=document.querySelector('#cnt');
                    artSpan.innerHTML=body.data;
                }
            },
            error:function (err) {
                location.href='/login.html';
            }
        })
    }

    getMyArtCount();

    // 删除博客
    function del(aid) {
        if (confirm('确定删除？')){
            jQuery.ajax({
                url:'/art/delete',
                type:'POST',
                data:{
                    aid:aid
                },
                success:function (body) {
                    if (body.code==200&&body.data==1){
                        // alert('删除成功！');
                        location.href=location.href;
                    }else{
                        alert('删除失败，请重试！');
                    }
                },
                error:function (err) {
                    if (err!=null&&err.status==401){
                        // alert("用户未登录, 即将跳转到登录页!")
                        // 已经被拦截器拦截了 - 未登录
                        location.href="/login.html";
                    }
                }
            })
        }
    }

</script>

</body>

</html>